import React from 'react'

// 引入上下文
import ThemeCtx from '@/utils/theme'

/**
 * 上下文
 * 作用：自上而下的向组件树中注入数据
 * 注意：在上下文的消费者（实际上就是那些被包裹的组件）不能修改上下文
 * 
 * 如何使用上下文？
 * 1、使用React.createContext() 创建上下文对象
 * 2、使用上下文对象中的<Provider value={}></Provider>组件，向React组件树中注入数据
 * 3、使用上下文对象<Consumer>{ () => () }</Consumer>组件，使用上下文的数据
*/

/* export default class TestContext extends React.Component {

  render () {
    console.log( this )
    return (
      <ThemeCtx.Consumer>
      {
        themes => (
          <div style={ { color: themes.color, background: themes.background } }>
            <h2>测试上下文</h2>
          </div>
        )
      }
      </ThemeCtx.Consumer>
    )
  }
}

// 使用上下文的第一种写法
TestContext.contextType = ThemeCtx */


// 使用上下文的第二种写法
export default class TestContext extends React.Component {

  render () {
    console.log( this )
    return (
      <ThemeCtx.Consumer>
      {
        themes => (
          <div 
            className="test-context"
            style={ { color: themes.color, background: themes.background } }
          >
            <h2>12346789</h2>
          </div>
        )
      }
      </ThemeCtx.Consumer>
    )
  }
}